<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>增删改2</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
    }

    p {
        font-size: 40px;
        margin: 20px 0 0 0;
        font-weight: bold;
    }

    button {
        font-size: 25px;
        width: 80px;
        height: 35px;
        background-color: #b3b1af;
        border: none;
        border-radius: 10%;
        box-shadow: black 0 0 5px;
        transition: linear 0.2s;
    }

    button:hover {
        background-color: pink;
        transform: scale(1.1);
        color: deeppink;
    }

    #table {
        width: 700px;
        margin: 0 auto;
        /*background-color: white;*/
        /*合并单元格*/
        border-collapse: collapse;
        /*将表格宽度设置为固定*/
        /*table-layout: fixed;*/
    }

    #table th, #table td {
        border: solid 1px black;
        text-align: center;
    }

    #add {
        border: solid 1px black;
        width: 700px;
        margin: 50px auto;
    }

    #add > span {
        display: flex;
        align-items: center;
    }

    #add > span b {
        width: 15%;
    }

    #add > span > input {
        font-size: 16px;
        width: 85%;
        height: 30px;
    }

    #btn_submit {
        text-align: center;
    }
</style>
<body>
<table id="table">
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>operate</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>小红</td>
        <td>hong@qq.com</td>
        <td>5000</td>
        <td>
            <button class="delete">Delete</button>
        </td>
    </tr>
    <tr>
        <td>小兰</td>
        <td>lan@qq.com</td>
        <td>10000</td>
        <td>
            <button class="delete">Delete</button>
        </td>
    </tr>
    <tr>
        <td>小花</td>
        <td>hua@qq.com</td>
        <td>8000</td>
        <td>
            <button class="delete">Delete</button>
        </td>
    </tr>
    </tbody>
</table>
<form id="add">
    <p>添加新员工:</p>
    <span><b>name:</b><input type="text" placeholder="请输入姓名"></span>
    <span><b>email:</b><input type="email" placeholder="请输入QQ邮箱 格式:/^[1-9]\d{7,9}@\w{2}\.(com|cn)$/"></span>
    <span><b>salary:</b><input type="number" placeholder="请输入工资"></span>
    <div id="btn_submit">
        <button id="submit">提交</button>
    </div>
</form>
</div>
</body>
<script>
    // 定义删除的回调函数
    function btn(button, fun) {
        // 函数回调
        button.onclick = fun
    }

    //通过类名获取所有的class="delete"
    var del = document.getElementsByClassName("delete")
    //删除按钮
    for (let i = 0; i < del.length; i++) {
        btn(del[i], function () {
            let button_parent = del[i].parentNode
            let name = button_parent.previousElementSibling.previousElementSibling.previousElementSibling
            //弹窗提示
            let result = confirm("确认删除" + name.innerHTML + "的信息吗？？？")
            if (result) {
                // 获取del[i]父亲节点的父亲节点元素
                let father_tr = this.parentNode.parentNode
                // 删除获取的节点元素
                father_tr.parentNode.removeChild(father_tr)
            }
        })
    }
    // 提交按钮点击事件
    var submit = document.getElementById("submit")
    submit.onclick = function (event) {
        /*
        由于表单的默认行为会导致页面重新加载，因此添加新行后，页面会重新刷新，新行会丢失。
        为了避免这种情况，你可以使用event.preventDefault()阻止表单的默认行为，这样页面就不会重新加载
        */
        event.preventDefault()
        // 通过css获取多个标签名为input
        let input = document.querySelectorAll("#add input")
        // 通过css获取一个标签名为tbody
        let tbody = document.querySelector("#table tbody")
        console.log(input)
        // 创建一个tr标签
        let tr = document.createElement("tr")
        // 将tr标签添加到tbody中
        tbody.appendChild(tr)
        // 在tr中创建4个td
        if (!/^[1-9]\d{7,9}@\w{2}\.(com|cn)$/.test(input[1].value)) {
            alert("邮件输入格式有误!请重新输入")
        } else {
            for (let i = 0; i < input.length; i++) {
                // 创建td
                let td = document.createElement("td")
                // 把td添加到tr中
                tr.appendChild(td)
                // 将input中获取的value赋值给td
                td.innerHTML = input[i].value
            }
            // 创建一个td用来装按钮
            let td_button = document.createElement("td")
            // 把td添加到tr中
            tr.appendChild(td_button)
            let add_delete = document.createElement("button")
            add_delete.innerText = "Delete"
            // 将按钮装进td
            td_button.appendChild(add_delete)

            // 给新添加的删除按钮绑定删除事件
            btn(add_delete, function () {
                let name = input[0].value
                let result = confirm("确认删除" + name + "的信息吗？？？")
                if (result) {
                    // 获取del[i]父亲节点的父亲节点元素
                    let father_tr = this.parentNode.parentNode
                    // 删除获取的节点元素
                    father_tr.parentNode.removeChild(father_tr)
                }
            })
        }
    }
</script>
</html>